<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="zoom">
    <div class="btn" @click="handleRate(10, 'down')">-</div>
    <div class="rate">{{rate}}%</div>
    <div class="btn" @click="handleRate(10, 'up')">+</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rate: 100
    }
  },
  methods: {
    handleRate(val, symbol) {
      if (symbol === 'down') {
        this.rate -= 10
      } else {
        this.rate += 10
      }
      this.$emit('onRate', this.rate)
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin layCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom {
  position: absolute;
  right: 10px;
  top: 60px;
  display: flex;
  z-index: 1;
}
.btn {
  width: 30px;
  height: 30px;
  background-color: #FFF;
  color: #333;
  border: 1px solid #dddddd;
  @include layCenter;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
}
.rate {
  @include layCenter;
  width: 60px;
}
</style>
